<template>
  <view class="content">
    <view class="top">
      <view class="">
        <img
          style="width: 150rpx; height: 150rpx"
          src="http://smzacc0p8.hn-bkt.clouddn.com/home_7.png"
          alt=""
        />
      </view>
      <view class="people">
        <view class="name">{{ userinfo.username }}</view>
        <view class="status">{{
          userinfo.identity == 1 ? "学生" : "教师"
        }}</view>
      </view>
      <view class="conbin">{{
        userinfo?.openId === null ? "未绑定微信" : "已绑定微信"
      }}</view>
      <!-- <view class="conbin" style="background-color: goldenrod;">已绑定微信</view> -->
      <view class="img" @tap="goMyInfo">
        <img
          style="width: 60rpx; height: 60rpx"
          src="http://smzacc0p8.hn-bkt.clouddn.com/home_5.png"
          alt=""
        />
      </view>
    </view>
    <view class="center">
      <view class="left" @tap="goReserve">
        <view class="">
          <img
            style="width: 80rpx; height: 80rpx"
            class="img"
            src="http://smzacc0p8.hn-bkt.clouddn.com/progress.png"
            alt=""
          />
        </view>
        <view class="box1"> 预约进程 </view>
      </view>
      <!-- <view class="right">
        <view class="">
          <img class="img" src="../../static/home_2.png" alt="" />
        </view>
        <view class="box2"> 账号安全 </view>
      </view> -->
    </view>
    <view class="bottom">
      <view class="top_1">
        <view class="" style="flex: 2">
          <img
            style="width: 80rpx; height: 80rpx"
            class="img"
            src="http://smzacc0p8.hn-bkt.clouddn.com/help.png"
            alt=""
          />
        </view>
        <view class="" style="flex: 8">帮助中心</view>
        <view class="" style="flex: 1">
          <img
            style="width: 50rpx; height: 50rpx"
            src="http://smzacc0p8.hn-bkt.clouddn.com/home_4.png"
            alt=""
          />
        </view>
      </view>
      <view class="bottom_1">
        <view class="" style="flex: 2">
          <img
            style="width: 80rpx; height: 80rpx"
            class="img"
            src="http://smzacc0p8.hn-bkt.clouddn.com/question.png"
            alt=""
          />
        </view>
        <view class="" style="flex: 8">问题反馈</view>
        <view class="" style="flex: 1">
          <img
            style="width: 50rpx; height: 50rpx"
            src="http://smzacc0p8.hn-bkt.clouddn.com/home_4.png"
            alt=""
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { InfoStore } from "../../store/index";
const useInfoStore = InfoStore();
const userinfo = ref(null);
onShow(() => {
  userinfo.value = useInfoStore.LoginInfo;
  console.log(userinfo.value);
});
const goMyInfo = () => {
  uni.navigateTo({
    url: "/pageA/myInfo/myInfo",
  });
};
const goReserve = () => {
  uni.navigateTo({
    url: "/pageA/reserve/reserve",
  });
};
</script>

<style lang="scss">
page {
  height: 100%;
  background: linear-gradient(to bottom, #f8f8f8, #edf6e3, #cff2a2);
}

.content {
  .top {
    box-sizing: border-box;
    padding: 50rpx;

    width: 100%;
    height: 25vh;
    border: 1rpx solid #c4c4c4;
    border-radius: 40rpx 40rpx 0 0;
    background-color: #fff;
    display: flex;
    text-align: center;
    justify-content: space-between;

    .people {
      margin-top: 30rpx;

      .name {
        font-size: 40rpx;
        font-family: "Roboto", sans-serif;
        font-weight: 700;
      }

      .status {
        margin-top: 10rpx;
        font-size: 30rpx;
        color: #4e4c4c;
      }
    }

    .conbin {
      margin-top: 30rpx;
      background-color: #bbb;
      font-size: 30rpx;
      height: 50rpx;
      line-height: 50rpx;
      padding: 10rpx;
      border-radius: 30rpx;
    }

    .img {
      margin-top: 30rpx;
    }
  }

  .center {
    box-sizing: border-box;
    margin-top: 30rpx;
    background-color: #fff;
    display: flex;
    padding: 50rpx;
    border: 1rpx solid #c4c4c4;

    .img {
      width: 100rpx;
      height: 100rpx;
    }

    .left,
    .right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    .right {
      margin-left: 60rpx;
    }
  }

  .bottom {
    margin-top: 30rpx;
    background-color: #fff;
    padding: 40rpx;

    .top_1 {
      padding: 20rpx;
      display: flex;
      align-items: center;
    }

    .bottom_1 {
      padding: 20rpx;
      display: flex;
      align-items: center;
    }
  }
}
</style>